<template>
    <div class = 'overview-wrapper'>
		<div class = "map-container" v-show = "isShow">
			<div id = "overview-map" :style = "wrapperStyle"></div>
			<div :style = "boxStyle" class = "overview-box" 
									ref="overViewbox" 
									@mousedown="viewBoxClickHandle"
									@touchstart="viewBoxClickHandle"
			>
			</div>
		</div>
		<!-- <div class = "ctrl-btn" @click = "toggleOverView"></div> -->
    </div>
</template>

<script>
import G from 'geohey-javascript-sdk'
import 'geohey-javascript-sdk/dist/lib/g-canvas.min'
import 'geohey-javascript-sdk/dist/lib/g-heat.min'
import 'geohey-javascript-sdk/dist/lib/g-maps.min'
import 'geohey-javascript-sdk/dist/lib/g-fluid.min'
import 'geohey-javascript-sdk/dist/lib/g-mapviz.min'
import BaseWidget from '@/jimu/BaseWidget.js'
export default {
	name: 'OverViewWidget',
	mixins:[ BaseWidget ],
	components: {

	},
	data () {
		return {
			width:186,
			height:100,
			startClientX: 0,
			startClientY: 0,
			isShow: true
		}
	},

	created: function () {
		this.boxWidth = this.width / 2
		this.boxHeight = this.height / 2
	},
	mounted: function(){
		this.initOverViewMap()
	},
	computed: {
		// 鹰眼图容器样式
		wrapperStyle: function(){
			let styleStr = ""
			styleStr += "width:"+ this.width+"px;"
			styleStr += "height:"+ this.height+"px;"
			return styleStr
		},

		// 浮层box样式
		boxStyle: function(){
			let styleStr = ""
			styleStr += "width:"+ this.boxWidth+"px;"
			styleStr += "height:"+ this.boxHeight+"px;"
			styleStr += "margin-top:"+ (this.boxHeight / 2)+"px;"
			styleStr += "margin-left:"+ (this.boxWidth / 2)+"px;"
			return styleStr
		},

		viewData: function(){
			return this.shareState.viewData
		},
		mainMap: function(){
			return this.shareState.map
		}
	},

	watch:{
		viewData: function(view){
			let ovresolution = view.res * this.getAutoLevel()
			let bottomLeft = this.extentToPoint(view.extent).bottomLeft
			let topRight = this.extentToPoint(view.extent).topRight
			this.boxWidth =  Math.abs((bottomLeft[0] - topRight[0]) / ovresolution)
			this.boxHeight = Math.abs((topRight[1] - bottomLeft[1]) / ovresolution)
			this.setViewBoxStyle(this.boxWidth,this.boxHeight)
			this.ovmap.zoomRes(view.center, ovresolution)
		}
	},

	methods:{
		/* 初始化鹰眼图 */
		initOverViewMap: function() {
			this.ovmap = new G.Map("overview-map", this.config.mapConfig)
			let baseMapLayer = new G.Layer.Tile(this.config.baseMap.url, {
				cluster: this.config.baseMap.cluster
			});
			baseMapLayer.addTo(this.ovmap)
			this.ovmap.bind('viewChanged',(event)=>{
				let viewData = {
					extent: this.ovmap.getExtent(),
					center: event.to.center,
					res: event.to.res
				}
			})
			this.littleMoveAction()
		},

		/* 将extent转换成点 */
		extentToPoint: function(extent){
			var xmin,ymin,xmax,ymax;
            xmin = extent[0];
            ymin = extent[1];
            xmax = extent[2];
			ymax = extent[3];
			return {
				bottomLeft: [xmin, ymin],
				topLeft: [xmin, ymax],
				topRight: [xmax, ymax],
				bottomRight: [xmax, ymin]
			}
		},

		/* 根据主地图容器大小与鹰眼图容器大小自动调整比例 */
		getAutoLevel: function(){
			let ovmapSize = this.ovmap.getSize();
			let mainMapSize = this.mainMap.getSize();
			let xLevel = Math.ceil(mainMapSize[0] / ovmapSize[0])
			let yLevel = Math.ceil(mainMapSize[1] / ovmapSize[1])
			return Math.max(xLevel,yLevel) * 2
		},

		/* 设置ViewBox大小 居中调整 */
		setViewBoxStyle: function(boxWidth, boxHeight){
			let boxStyle = this.$refs.overViewbox.style
			boxStyle.width = boxWidth + "px"
			boxStyle.height = boxHeight + "px"
			boxStyle.marginTop = -(boxHeight / 2) + "px"
			boxStyle.marginLeft = -(boxWidth / 2) + "px"
		},

		// 微小移动触发主地图viewChanged事件
		littleMoveAction: function(){
			if(this.mainMap){
				let curCenter = this.mainMap.getCenter()
				curCenter[0] = curCenter[0] + 0.000000001
				this.mainMap.centerAt(curCenter)
			}
		},
		
		/* ViewBox 点击事件 */
		viewBoxClickHandle: function(e){
			this.startClientX = e.clientX?e.clientX:e.touches[0].clientX
			this.startClientY = e.clientY?e.clientY:e.touches[0].clientY
			window.addEventListener('mousemove', this.moveHandle)
			window.addEventListener('mouseup', this.endMovingHandle)
			window.addEventListener('touchmove', this.moveHandle)
			window.addEventListener('touchend', this.endMovingHandle)
			window.addEventListener('touchcancel', this.endMovingHandle)
		},

		/* 鼠标移动事件 */
		moveHandle: function(e){
			let clientX = e.clientX?e.clientX:e.touches[0].clientX;
			let clientY = e.clientY?e.clientY:e.touches[0].clientY;
			this.changeBoxPosition(clientX, clientY)
		},

		/* ViewBox拖拽结束 */
		endMovingHandle: function(e){
			let clientX = e.clientX?e.clientX:e.changedTouches[0].clientX;
			let clientY = e.clientY?e.clientY:e.changedTouches[0].clientY;
			window.removeEventListener('mousemove', this.moveHandle)
			window.removeEventListener('mouseup', this.endMovingHandle)
			window.removeEventListener('touchend', this.moveHandle)
			window.removeEventListener('touchcancel', this.endMovingHandle)
			let moveX = clientX - this.startClientX
			let moveY = clientY - this.startClientY
			let mainMapMoveX = moveX * (this.ovmap.getResolution()/this.mainMap.getResolution())
			let mainMapMoveY = moveY * (this.ovmap.getResolution()/this.mainMap.getResolution())
			this.mainMap.panBy(-mainMapMoveX, mainMapMoveY)
			this.setViewBoxStyle(this.boxWidth, this.boxHeight)
		},
		/* 拖拽改变ViewBox位置信息 */
		changeBoxPosition: function(clientX, clientY){
			this.$refs.overViewbox.style.marginLeft = (clientX-this.startClientX-(this.boxWidth/2)) + "px"
			this.$refs.overViewbox.style.marginTop = (clientY-this.startClientY-(this.boxHeight/2)) + "px"
		},

		toggleOverView: function(){
			this.isShow = !this.isShow
		}

	}
}
</script>

<style lang="scss">
.overview-wrapper{
	position: absolute;
	z-index: 999;
	.map-container{
		overflow: hidden;
		border: 1px solid #ababab;
	}
	.overview-box{
		border: 1px dashed #ff0000;
		opacity: 0.8;
		top:50%;
		left:50%;
		cursor: move;
		position: absolute;
	}
	.ctrl-btn{
		height:15px;
		width:15px;
		cursor: pointer;
		position: absolute;
		bottom:5px;
		right:5px;
		background-image: url(./images/arrow.png);
		background-size: contain;
    	background-repeat: no-repeat;
	}
}
</style>